<template>
	<div>
		<el-card>
			<Quithead />
			<vxe-table
				:align="'center'"
				border
				resizable
				row-key
				highlight-hover-row
				ref="xTable"
				:auto-resize="true"
				:data="tableData"
				@cell-dblclick="cellDBLClickEvent"
			>
				<vxe-table-column field="name" title="姓名"></vxe-table-column>
				<vxe-table-column field="department" title="部门"></vxe-table-column>
				<vxe-table-column field="job" title="岗位"></vxe-table-column>
				<vxe-table-column field="askdate" title="申请日期"></vxe-table-column>
				<vxe-table-column field="enddate" title="合同截止日期"></vxe-table-column>
				<vxe-table-column field="leavereason" title="离职理由"></vxe-table-column>
				<vxe-table-column title="操作" show-overflow>
					<template #default="{ row }">
						<vxe-button status="success" @click="pass(row)">批准</vxe-button>
						<vxe-button status="danger" @click="removeEvent(row)">拒绝</vxe-button>
					</template>
				</vxe-table-column>
			</vxe-table>
		</el-card>
	</div>
</template>
<script lang="ts">
import Quithead from '/@/views/transfer/quit/head.vue';
import {  ref, defineComponent} from 'vue'
import { ElMessage } from 'element-plus'
import { VXETable, VxeTableInstance } from 'vxe-table'
export default {
	name: 'quit',
	components: { Quithead },
	setup() {
		const tableData = ref([
			{
				name: '张三',
				department: '研发部',
				job: '程序员',
				askdate: '2021年4月6日',
				enddate: '2021年5月6日',
				leavereason: '个人原因',
			},
			{
				name: '李四',
				department: '公关部',
				job: '公关',
				askdate: '2021年4月1日',
				enddate: '2021年5月1日',
				leavereason: '谋求更好的发展',
			},
			{
				name: '王五',
				department: '研发部',
				job: '产品经理',
				askdate: '2021年3月1日',
				enddate: '2021年5月1日',
				leavereason: '不适应企业文化',
			},
			{
				name: '赵六',
				department: '研发部',
				job: '项目经理',
				askdate: '2021年5月1日',
				enddate: '2021年5月1日',
				leavereason: '合同到期',
			},
		]);
		const xTable = ref({} as VxeTableInstance);

		const removeEvent = (row: any) => {
			VXETable.modal.confirm('您确定要拒绝该条离职申请吗?').then((type) => {
				if (type === 'confirm') {
					const $table = xTable.value;
					$table.remove(row);
					ElMessage.warning({
						message: '操作成功！ 已拒绝',
						type: 'warning'
					});
				}
			});
		};

		const pass = (row: any) => {
			VXETable.modal.confirm('您确定要批准该条离职申请吗?').then((type) => {
				if (type === 'confirm') {
					const $table = xTable.value;
					$table.remove(row);
					ElMessage.success({
						message: '操作成功！ 已拒绝',
						type: 'success'
					});
				}
			});
		};

		return {
			xTable,
			removeEvent,
			pass,
			tableData,
		};
	},
	data() {
		return {};
	},
	methods: {},
	computed: {},
};
</script>
<style lang="scss">
</style>
